import React from "react";
import { View, ImageBackground, Text } from "react-native";
import img1 from '@/assets/img/learning/learning-card-bg-1.png'
import img2 from '@/assets/img/learning/learning-card-bg-2.png'
import img3 from '@/assets/img/learning/learning-card-bg-3.png'
import img4 from '@/assets/img/learning/learning-card-bg-4.png'
import img5 from '@/assets/img/learning/learning-card-bg-5.png'
import img6 from '@/assets/img/learning/learning-card-bg-6.png'
import img7 from '@/assets/img/learning/learning-card-bg-7.png'

type Props = {
  index: number,
  title: string
}

const imgs = [img1, img2, img3, img4, img5, img6, img7]

const Card: React.FC<Props> = ({ index, title }: Props) => {
  return (
    <View style={{
      width: 160,
      height: 160,
      justifyContent: 'center',
      alignItems: 'center',
      borderRadius: 10,
      overflow: 'hidden',
      // paddingHorizontal: 20
    }}>
      <ImageBackground
        source={imgs[index]}
        resizeMode="cover"
        style={{
          // flex: 1,
          width: '100%',
          height: '100%',
          // justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Text
          style={{
            fontSize: 24,
            // color: '#6666f0',
            color: '#fff',
            fontWeight: 'bold',
            textShadowOffset: { width: 3, height: 3 },
            textShadowColor: 'rgba(0, 0, 0, .8)',
            textShadowRadius: 8,
            marginTop: 5,
          }}
        >{title}</Text>
      </ImageBackground>
    </View>
  )
}

export default Card